body{
    display: flex;
    flex-direction: column;
 
    main{
        flex: 1;
        background: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow-y: scroll;
        header{
            width: 100%;
            height: 200PX;
            background: #f60;
            margin-bottom: 20px;
            .swiper {
                width: 100%;
                height: 200PX;
                img{
                    width: 100%;
                    height: 200PX;
                    font-size: 0;
                }
            } 
        }
        .div{
            width: 90%;
            min-height: 120px;
            background: rgb(228, 131, 131);
            margin-bottom: 20px;
        }
        .oneBox{
            width: 90%;
            min-height:  auto;
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            .ranking{
                width: 40%;
                height: 150px;
                background: #007cc4;
                border-radius: 15px;
                overflow: hidden;
                position: relative;
                span{
                    display: block;
                    font-size: 18px; 
                    color: #012f49;
                    position: absolute;
                    top: 20px;
                    left: 10px;
                    z-index: 1;
                }
                .iconfont{
                    background: #007cc4;
                    font-size: 120px;
                    color: rgba(255, 255, 255,.5);
                    position: absolute;
                    left: -20px;
                    bottom: -10px;
                }
                .num{
                    font-size: 100px;
                    color:#fff;
                    position: absolute;
                    right: 10px;
                    bottom: 0;
                }
            }
            .Card{
                width: 55%;
                height: 150px;
                background: rgb(53, 155, 250);
                border-radius: 15px;
                overflow: hidden;
                position: relative;
                span{
                    display: block;
                    font-size: 18px; 
                    color: #012f49;
                    position: absolute;
                    top: 20px;
                    left: 10px;
                    z-index: 1;
                }
                .iconfont{
                    background: rgb(53, 155, 250);
                    font-size: 100px;
                    color: rgba(255, 255, 255,.5);
                    position: absolute;
                    left: 0px;
                    bottom: 0px;
                }
                .num{
                    font-size: 20px;
                    color: #012f49;
                    border: 2px solid #012f49;
                    border-radius: 15px;
                    position: absolute;
                    right: 20px;
                    bottom: 30px;
                }
            }
        }
        .twoBox{
            width: 90%;
            min-height:  auto;
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            .datas{
                width: 47.5%;
                height: 120px;
                background: url('../../assets/imgs/index-card-data.png');
                background-size: 100%;
                border-radius: 15px;
                overflow: hidden;
                position: relative;
                span{
                    display: block;
                    font-size: 18px; 
                    color: #fff;
                    position: absolute;
                    top: 20px;
                    left: 10px;
                } 
            }
            .emblem{
                width: 47.5%;
                height: 120px;
                background: #8dadf3;
                border-radius: 15px;
                overflow: hidden;
                position: relative;
                span{
                    display: block;
                    font-size: 18px; 
                    color: #012f49;
                    position: absolute;
                    top: 20px;
                    left: 10px;
                    z-index: 1;
                }
                .iconfont{
                    background: #8dadf3;
                    font-size: 100px;
                    color: rgba(255, 255, 255,.5);
                    position: absolute;
                    left: 0px;
                    bottom: 0px;
                }
                .num{
                    color: #012f49;
                    font-size: 70px;
                    border-radius: 15px;
                    position: absolute;
                    right: 30px;
                    bottom: 10px;
                } 
                .monad{
                    color: #012f49;
                    font-size: 18px;
                    position: absolute;
                    right: 10px;
                    bottom: 20px;
                }
            }
        }
        .course{
            background:url('../../assets/imgs/course-img04.jpg');
            background-size: 100%;
            border-radius: 15px;
            overflow: hidden;
            position: relative;
            span{
                display: block;
                font-size: 18px; 
                color: #fff;
                position: absolute;
                top: 20px;
                left: 10px;
            } 
        }
        .outdoors{
            background:url('../../assets/imgs/index-card-run.png');
            background-size: 100%;
            border-radius: 15px;
            overflow: hidden;
            position: relative;
            span{
                display: block;
                font-size: 18px; 
                color: #fff;
                position: absolute;
                top: 20px;
                left: 10px;
            } 
        }
        

    }
    footer{
        width: 100%;
        height: 60px;
        background: #fff;
        display: flex;
        justify-content: space-between;
        .footerBox{
            width: 15%;
            height: 100%;
            text-align: center;
            .iconfont{
            font-size: 35px;
            }
            a{
               color: #2e2e2e; 
            }

        }
       
    }
}